<template>
  <div class="">
    <el-table :data="tableData" style="width: 100%;margin-top:20px;line-height:10px">
      <el-table-column label="序号" type="index"> </el-table-column>
      <el-table-column prop="title" label="文章标题" width="300">
        <template v-slot="{ row }">
          <span>{{ row.title }}</span>
          <i v-if="row.videoURL" style="color:blue;font-size:20px;margin-left:5px;" class="el-icon-film" @click="OnVideo(row)"></i>
        </template>
      </el-table-column>
      <el-table-column prop="visits" label="阅读数"> </el-table-column>
      <el-table-column prop="username" label="录入人"> </el-table-column>
      <el-table-column prop="createTime" label="录入时间">
        <template v-slot="{ row }">
          {{ parseTime(new Date(row.createTime)) || row.createTime }}
        </template>
      </el-table-column>
      <el-table-column prop="state" label="状态">
        <template v-slot="{ row }">
          <span v-if="row.state">启用</span>
          <span v-else>禁用</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button type="text" @click="$emit('onpreview', row)">预览</el-button>
          <el-button type="text" @click="disabledClick(row)">{{ row.state ? '禁用' : '启用' }}</el-button>
          <el-button :disabled="!row.state" type="text" @click="$emit('eidtBtn', row)">修改</el-button>
          <el-button :disabled="!row.state" type="text" @click="delClick(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 视频 -->
    <my-video v-if="showVideo" :videourl="videourl" @onClose="showVideo = false" />
  </div>
</template>

<script>
import { delArticles, stateArticles } from '@/api/articles';
import { parseTime } from '@/utils';
import myVideo from './showVideo.vue';
export default {
  name: '',
  components: {
    myVideo
  },
  props: {
    tableData: {
      type: Array,
      default: null
    },
    showpopups: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      parseTime,
      showVideo: false,
      videourl: ''
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 删除
    async delClick(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await delArticles(id);
          this.$emit('delClick');
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    // 启用禁用
    async disabledClick(data) {
      data.state = data.state ? 0 : 1;
      await stateArticles(data.id, data.state);
      this.$message.success('操作成功');
    },
    // 视频
    OnVideo(row) {
      this.videourl = row.videoURL;
      this.showVideo = true;
    }
  }
};
</script>
<style lang="scss" scoped></style>
